<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Full Page Layout - Example</title>
        <style type="text/css">
            /*margin and padding on body element
              can introduce errors in determining
              element position and are not recommended;
              we turn them off as a foundation for YUI
              CSS treatments. */
            body {
                margin:0;
                padding:0;
            }
            #toggle {
                text-align: center;
                padding: 1em;
            }
            #toggle a {
                padding: 0 5px;
                border-left: 1px solid black;
            }
            #tRight {
                border-left: none !important;
            }
            .centerBox {
                display:inline-block;
                text-align:center;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="yui/build/reset-fonts-grids/reset-fonts-grids.css" />
        <link rel="stylesheet" type="text/css" href="yui/build/resize/assets/skins/sam/resize.css" />
        <link rel="stylesheet" type="text/css" href="yui/build/layout/assets/skins/sam/layout.css" />
        <link rel="stylesheet" type="text/css" href="yui/build/button/assets/skins/sam/button.css" />
        <script type="text/javascript" src="yui/build/yahoo/yahoo-min.js"></script>
        <script type="text/javascript" src="yui/build/event/event-min.js"></script>
        <script type="text/javascript" src="yui/build/dom/dom-min.js"></script>
        <script type="text/javascript" src="yui/build/element/element-min.js"></script>
        <script type="text/javascript" src="yui/build/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript" src="yui/build/resize/resize-min.js"></script>
        <script type="text/javascript" src="yui/build/animation/animation-min.js"></script>
        <script type="text/javascript" src="yui/build/layout/layout-min.js"></script>

        <script type="text/javascript" src='wz_jsgraphics.js'></script>          
        <script type="text/javascript" src='mootools.js'></script>
        <script type="text/javascript" src='moocanvas.js'></script>
        <script type="text/javascript" src='draw2d.js'></script>

        <!-- demo specific imports -->
        <script type="text/javascript" src="ResizeImage.js"></script>
        <script type="text/javascript" src="Start.js"></script>
        <script type="text/javascript" src="End.js"></script>
        <script type="text/javascript" src="ContextmenuConnection.js"></script>
        <script type="text/javascript" src="MyInputPort.js"></script>
        <script type="text/javascript" src="MyOutputPort.js"></script>
        <script type="text/javascript" src="XMLSerializer_01.js"></script>

        <!--<script type="text/javascript" src="ext-all.js"></script>-->

        <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
        <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
        
        
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>


    </head>

    <body class=" yui-skin-sam">
        <div id="top1">
            <div id="toolbar"></div>
        </div>
        <div id="bottom1"></div>
        <div id="right1">

        </div>

        
            
        <div id="left1">
            <center>
                <br>
                <br>
                <div id="objs" class="centerBox"><img src="Start.png" id="dragMe" class="drag" style="cursor:move"/></div>
                <br>
                <br>
                <br>
                <div id="objs2" class="centerBox"><img src="End.png"   id="dragMe2" class="drag" style="cursor:move"/></div>
            </center>            
        </div>
        <div id="center1" >
            <div id="paintarea" style="position:relative;width:3000px;height:3000px;" >
            </div>
        </div>
        



        <script>
            function debug(msg)
            {
                var console = document.getElementById("bottom1");
                console.innerHTML=console.innerHTML+"<br>"+msg;
            }
           
            var workflow  = new draw2d.Workflow("paintarea");
            var startObj = new draw2d.Start();
            workflow.addFigure(startObj, 450,200);

            // Add the end node to the canvas
            //
            var endObj   = new draw2d.End();
            workflow.addFigure(endObj,600,300);

            var c = new draw2d.Connection();
            c.setRouter(new draw2d.BezierConnectionRouter());
            c.setSource(startObj.getPort("output"));
            c.setTarget(endObj.getPort("input"));
            c.setTargetDecorator(new draw2d.ArrowConnectionDecorator());
            c.setLineWidth(2);
            workflow.addFigure(c);
            
            var oButton3 = new YAHOO.widget.Button({                
                type: "button", 
                label: "Print", 
                container: "toolbar"                
            });
            
            this.oButton3.on('click', function(e){
              //  alert("fdfd");
                var dd = new draw2d.XMLSerializer_01().toXML(workflow.getDocument());
                debug(dd);
            });           
            //var onButtonClick = function(){
             //       alert("click");
              //      var dd = new draw2d.XMLSerializer_01().toXML(workflow.getDocument());
              //      debug(dd);
              //};

            (function() {
                var Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event;
                
                
                Event.onDOMReady(function() {
                    var layout = new YAHOO.widget.Layout({
                        units: [
                            { position: 'top', height: 75, body: 'top1', header: 'Top', gutter: '5px', collapse: true, resize: true },
                            { position: 'right', header: 'Right', width: 300, resize: true, gutter: '5px', footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true },
                            { position: 'bottom', header: 'Bottom', height: 100, resize: true, body: 'bottom1', gutter: '5px', collapse: true, scroll: true },
                            { position: 'left', header: 'Left', width: 200, resize: true, body: 'left1', gutter: '5px', collapse: true, close: false, collapseSize: 50, scroll: false, animate: true },
                            { position: 'center', body: 'center1' }
                        ]
                    });
                    layout.on('render', function() {
                        layout.getUnitByPosition('left').on('close', function() {
                            closeLeft();
                        });
                    });
                    layout.render();
                    Event.on('tLeft', 'click', function(ev) {
                        Event.stopEvent(ev);
                        layout.getUnitByPosition('left').toggle();
                    });
                    Event.on('tRight', 'click', function(ev) {
                        Event.stopEvent(ev);
                        layout.getUnitByPosition('right').toggle();
                    });
                    Event.on('padRight', 'click', function(ev) {
                        Event.stopEvent(ev);
                        var pad = prompt('CSS gutter to apply: ("2px" or "2px 4px" or any combination of the 4 sides)', layout.getUnitByPosition('right').get('gutter'));
                        layout.getUnitByPosition('right').set('gutter', pad);
                    });
                    var closeLeft = function() {
                        var a = document.createElement('a');
                        a.href = '#';
                        a.innerHTML = 'Add Left Unit';
                        Dom.get('closeLeft').parentNode.appendChild(a);

                        Dom.setStyle('tLeft', 'display', 'none');
                        Dom.setStyle('closeLeft', 'display', 'none');
                        Event.on(a, 'click', function(ev) {
                            Event.stopEvent(ev);
                            Dom.setStyle('tLeft', 'display', 'inline');
                            Dom.setStyle('closeLeft', 'display', 'inline');
                            a.parentNode.removeChild(a);
                            layout.addUnit(layout.get('units')[3]);
                            layout.getUnitByPosition('left').on('close', function() {
                                closeLeft();
                            });
                        });
                    };
                    Event.on('closeLeft', 'click', function(ev) {
                        Event.stopEvent(ev);
                        layout.getUnitByPosition('left').close();
                    });
                   
                    YUI({ filter: 'raw' }).use('dd-drop', 'dd-proxy', function(Y) {
                        var drop = new Y.DD.Drop({
                            node: '#center1',
                            groups: 'g1'
                        });
                        var del = new Y.DD.Drag({
                            //container: '#left1',
                            node: '#objs',
                            groups: 'g1'
                        }).plug(Y.Plugin.DDProxy, {
                            moveOnEnd: true
                        });
                        del.on('drag:start', function(e) {
                            var p = del.get('dragNode'),
                                n = del.get('node');
                                n.setStyle('opacity', .25);
                                p.set('innerHTML', n.get('innerHTML'));
                                p.setStyles({
                                    backgroundColor: n.getStyle('backgroundColor'),
                                    color: n.getStyle('color'),
                                    opacity: .65,
                                    border: 0
                                });
                            //del.get('node').setStyles({                               
                            //    opacity: 0.5                               
                            //});
                        });
                        del.on('drag:end', function(e) {
                            del.get('node').setStyles({
                                top: 0,
                                left: 0,
                                opacity: 1
                                
                            });
                        });
                        del.on('drag:drophit', function(e) {
                             var xy = e.drop.get('node').getXY();
                             //this.get('node').setXY(xy, Y.UA.ie);
                            //alert(xy);
                        });
                        
                        drop.on('drop:hit', function(e) { 
                            //var xy = e.drag.get('node').getXY();
                            var xy = del.get('dragNode').getXY();
                            var xOffset    = workflow.getAbsoluteX();
                            var yOffset    = workflow.getAbsoluteY();
                            var scrollLeft = workflow.getScrollLeft();
                            var scrollTop  = workflow.getScrollTop();
                             
                             //workflow.addFigure(eval("new "+data.name+"()"),e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
                             workflow.addFigure(eval("new draw2d.Start()"),xy[0]-xOffset+scrollLeft,xy[1]-yOffset+scrollTop);
                            
                            // alert(tu);
                        });
                        
                        //var drop = Y.one('#center1').plug(Y.Plugin.Drop);
                        //drop.drop.on('drop:hit', function(e) { 
                        //    var o = e.drag;
                             //workflow.addFigure(eval("new "+data.name+"()"),e.xy[0]-xOffset+scrollLeft,e.xy[1]-yOffset+scrollTop);
                         //    workflow.addFigure(eval("new draw2d.Start()"),100,100);
                             //alert("drop1");
                       // });
//                        var drags = Y.Node.all('#left1 img.drag');
 //                       drags.each(function(v, k) {
 //                           //var thisData = {};
 //                           //Y.mix(thisData, data[v.get('id')]);
 //                           var dd = new Y.DD.Drag({
//                                node: v,
//                                dragMode: 'intersect',
 //                               data: this
  //                          }).plug(Y.Plugin.DDConstrained, {
  //                              //constrain2node: '#group'
  //                          });
   //                         dd.on('drag:end', function(e) {
    //                            e.preventDefault();
                                //alert("end");
   //                         });
     //                   });

       //                 var drop = new Y.DD.Drop({
         //                   node: '#paintarea'
           //             });
             //           drop.on('drop:hit', function(e) {
                            //var drag = e.drag;
                            //var data = drag.get('data');
                            //var out = ['id: ' + drag.get('node').get('id')];
                            //Y.each(data, function(v, k) {
                            //    out[out.length] = k + ': ' + v;
                            //});
                            //var str = '<p><strong>Dropped</strong>: ' + out.join(', ') + '</p>';
                            //this.get('node').set('innerHTML', str);
                 //           alert("drop");
               //         });
                    });
                
                    
                });


            })();
        </script>
    </body>
</html>

<!-- SpaceID=0 uninitialized -->
<!-- VER-3.0.205072 -->
<!-- p1.ydn.bf1.yahoo.com uncompressed Thu Oct 27 03:40:04 PDT 2011 -->
